<template>
  <div>
    <h1 class="title">登录记录</h1>
    <div>
      <p class="item_title">登录详情</p>
      <div class="item" v-for="item in login">
        <label>{{item.phone}}<i>({{item.roleName}})</i></label>
        <span class="time">时间：{{item.createTime}}</span>
      </div>
    </div>

    <div class="pagination">
      <el-pagination background layout="prev, pager, next" @current-change="currentChange" prev-text="上一页"
                     next-text="下一页" :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        login: [],
        total: 0,
        pageIndex: 1,
        pageSize: 10
      }
    },
    created() {
      this.initLoginInfo()
    },
    methods: {
      // 分页按钮
      currentChange(_index) {
        this.pageIndex = _index
        this.initLoginInfo()
      },
      initLoginInfo() {
        this.$post('/user/manager/login/record', {pageIndex: this.pageIndex, pageSize: this.pageSize}, res => {
          this.login = res.list
          this.total = res.total
          if (res.list.length == 0) {
            this.$message({message: '没有查询到数据', type: 'warning'})
          }
        })
      }
    }
  }
</script>

<style scoped>
  .title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
  }

  .item {
    margin: 10px;
    padding: 5px;
    background: #E4E7ED;
  }

  .item > label > i {
    font-size: 12px;
    font-style: normal;
    margin-left: 20px;
    color: #909399;
  }

  .item_title {
    padding: 10px;
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    background-color: #D2D2D2;
  }

  .time {
    float: right;
    font-size: 12px;
    color: #909399;
  }

  .pagination {
    margin-top: 30px;
    text-align: center;
  }
</style>
